<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
    <script th:src="@{/js/jquery.min.js}"></script>
    <style type="text/css">
        #qrcode-mask {
            margin-left: 40px;
            margin-top: 30px;
        }

        #code-panel {
            width: 280px;
            height: 320px;
            border: 1px solid #e1e1e1;
            margin: 0 auto;
            margin-top: 30px;
            background-color: rgba(255, 215, 255, 0.25);
            box-shadow: -4px -4px 6px rgba(0, 0, 0, 0.35) inset;
        }

        /*rgba(25,252,205,0.15);*/
        #desc {
            color: #717375;
            font-size: 14px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        setInterval('myrefresh()', 1000); //指定1秒刷新一次
        function myrefresh() {
            $.ajax({
                type: 'POST',
                url: '/img',
                dataType: 'json',
                data: '',
                success: function (result) {
                    if (result.code == 1) {
                        $("#qrcode").attr('src', 'data:image/png;base64,' + result.img);
                    } else {
                        alert(result.info);
                    }
                },
                error: function (result) {
                    alert("获取失败");
                }
            });
        }
    </script>
</head>

<body>
<div id="code-panel">
    <div id="qrcode-mask">
        <img id="qrcode" alt="" src="">
    </div>
    <div id="desc" th:text="${info}">

    </div>
</div>
</body>
</html>
